import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../../../components/FooterButton/FooterButton.dart';
import '../../../components/Search/Search.dart';
import '../../../controller/ListController.dart';
import '../../../store/template/template.dart';
import '../../content-layout.dart';
import 'TemplateForm.dart';
import 'TemplateInfo.dart';

class TemplateList extends StatefulWidget {
  const TemplateList({super.key});

  @override
  State<TemplateList> createState() => _TemplateListState();
}

class _TemplateListState extends State<TemplateList> {
  final TemplateFormController newFormController = TemplateFormController();

  String curState = 'edit';

  ListController<TemplateData> listController =
      ListController<TemplateData>(loadCallBack: () async {
    dynamic data = await TemplateStore.getTemplateList();
    return data;
  });

  late FooterButtonController footerButtonController = FooterButtonController(
    onConfirm: () async {
      TemplateData data = newFormController.getFormData();
      await TemplateStore.insertTemplate(data);
      listController.refresh();
    },
    onCanCel: () {},
  );

  @override
  Widget build(BuildContext context) {
    Widget rightWight = curState=='new'?TemplateForm(controller: newFormController,):TemplateInfo(data: listController.list.isNotEmpty? listController.list[listController.activeIndex]:null,);
    return ContentLayout(
      leftSlot: TemplateListRender(
        controller: listController,
        itemClick:(){
          setState(() {
            curState = 'edit';
          });
        }
      ),
      rightSlot: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Expanded(
              child: rightWight,
            ),
            FooterButton(
              controller: footerButtonController,
            )
          ],
        ),
      ),
      headerSlot: Row(
        children: [
          const SearchWidget(),
          const SizedBox(
            width: 20,
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                curState = 'new';
              });
            },
            child: const Text('新建'),
          ),
        ],
      ),
    );
  }
}

class TemplateListRender extends StatefulWidget {
  ListController<TemplateData> controller;

  Function itemClick;

  TemplateListRender({super.key, required this.controller, required this.itemClick});

  @override
  State<TemplateListRender> createState() => _TemplateListRenderState();
}

class _TemplateListRenderState extends State<TemplateListRender> {
  loadList() async {
    widget.controller.load();
  }

  @override
  void initState() {
    super.initState();
    loadList();
  }

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: widget.controller,
      builder: (context, child) {
        return ListView.builder(
          itemCount: widget.controller.list.length,
          itemBuilder: (context, index) {
            bool isActive = index == widget.controller.activeIndex;

            Color bgColor =
                isActive ? const Color.fromRGBO(95, 107, 158, 1) : Colors.white;
            Color textColor =
                isActive ? Colors.white : const Color.fromRGBO(95, 107, 158, 1);

            return GestureDetector(
              onTap: () {
                widget.controller.itemClick(index);
                widget.itemClick();
              },
              child: Container(
                height: 80,
                width: double.infinity,
                margin: const EdgeInsets.only(bottom: 8),
                decoration: BoxDecoration(
                  color: bgColor,
                  borderRadius: const BorderRadius.all(Radius.elliptical(8, 8))
                ),
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '${widget.controller.list[index].name}',
                        style: TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 18,
                          color: textColor,
                        ),
                      ),
                      Text(
                        '${widget.controller.list[index].desc}',
                        style: const TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 16,
                          color: Color.fromRGBO(200, 200, 200, 1),
                        ),
                      )
                      // Expanded(child: Text('${list[index]["desc"]}'),)
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }
}
